<template>
	<view id="map-container"></view>
</template>

<script>
	import AMapLoader from "@amap/amap-jsapi-loader";
	import point from "@/static/aidex/point.png";
	window._AMapSecurityConfig = {
		securityJsCode: "055e35f6cb6c44e5b3f2a032f807bd87",
	};
	export default {
		data() {
			return {
				map: null,
			};
		},
		mounted() {
			this.initMap();
		},
		created() {
			this.initMap();
		},
		props: {
			equipment_name: String,
			coordinate:String,
		},
		methods: {
			initMap() {
				AMapLoader.load({
						key: "babb406b66655f5e409b88d80013174a",
						version: "2.0",
						plugins: [],
					})
					.then((AMap) => {
						console.log(AMap);
						this.mapInit()
					})
					.catch((e) => {
						console.log(e);
					});
			},
			mapInit() {
				var coordinateArray = this.coordinate.split(",");
				var map = new AMap.Map("map-container", {
					viewMode: "2D",
					zoom: 15,
					center: coordinateArray,
					resizeEnable: true
				});

				// 创建标记点
				var marker = new AMap.Marker({
					position: coordinateArray,
					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
					map: map
				});

				// 创建自定义文字
				var text = new AMap.Text({
					text:this.equipment_name,
					position: coordinateArray,
					offset: new AMap.Pixel(0, -30),
					style: {
						color: 'red',
						fontSize: '14px',
						fontWeight: 'bold'
					}
				});

				// 将自定义文字添加到地图上
				map.add(text);


			}
		},
	};
</script>

<style scoped>
	#map-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>